<template>
	<view>
		
		<view >
			<image class="image1" src="../../static/images/common/yuyue.png"></image>
		</view>
		
		<view class="inputype">
			<view class="text">楼盘名称</view>
			<input class="text2" type="text" placeholder="请输入楼盘名称" placeholder-class="pld"/>
		</view>
		
		
		<view class="inputype">
			<view class="text">预约类型</view>
			<picker class="appointment-input-box" mode="selector" :range="appointment_type" range-key="type" :value="index" @change="onPickerChange">
				<text class="appointment-input-text">{{appointment_type[index].type}}</text>
			<image class="haha" src="../../static/images/icon/right_icon.png"></image>
			</picker>
		</view>
		
		<view class="inputype">
			<view class="text">户型</view>
			<input class="text3" type="text" placeholder=" 超大" placeholder-class="pld"/>
			<text class="appointment-size-unit">(m²)</text>
		</view>
		
		
		<view class="inputype">
			<view class="text">姓名</view>
			<input class="text3" type="text" placeholder=" 罗倩" placeholder-class="pld"/>
		</view>
		
		<view class="inputype">
			<view class="text">联系方式</view>
			<input class="text2" type="text" placeholder="18520416926" placeholder-class="pld"/>
		</view>
		
		<view class="inputype">
			<view class="text">微信号码</view>
			<input class="text2" type="text" placeholder="hh02250623" placeholder-class="pld"/>
		</view>
		
		
		
		<view class="div1">
			<view class="div2">确定预约</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				index:1,
				title:"罗倩202165110387",
				appointment_type:[{
					id:1,type:"验房"
				},
				{
					id:2,type:"微改报价"
				},
				{
					id:3,type:"设计"
				},
				{
					id:4,type:"领包入住"
				}
				]
							}
		},
		methods: {
			onPickerChange:function(e){
				this.index=e.target.value
			}
		}
	}
</script>

<style>
@import url("../../static/images/css/bootstrap-theme.min.css");
.inputype{
	display: flex;
	box-sizing: border-box;
	line-height: 30rpx;
}
.image1{
	width: 800rpx;
	height: 480rpx;
}
.text{
	position: relative;
    margin-left: 20rpx;
	margin-top: 20rpx;
	font-size: 35rpx;
	color: #ccc;
}
.text2{
	margin-top: 15rpx;
	margin-left: 35rpx;
	font-size: 35rpx;
	border-radius: 6px ;
	border-width: 3rpx;
	border-style: solid;
	border-color: #ccc;
	opacity: 0.8;
}
.pld{
	margin-left: 35rpx;
	color: black;
	size: 60rpx;
}
.text3{
	margin-top: 15rpx;
	margin-left: 100rpx;
	font-size: 35rpx;
	border-radius: 6px ;
	border-width: 3rpx;
	border-style: solid;
	border-color: #ccc;
	opacity: 0.8;
}
.div1{
	width: 300rpx;
	height: 100rpx;
	background-color: #88ada6;
	border-radius: 15px ;
	margin-left: 220rpx;
	margin-top: 40rpx;
	position: absolute;
}
.div2{
	position: relative;
	margin-left: 80rpx;
	margin-top: 26rpx;
	color: #fff;
	font-weight: 100;
	}
	.text4{
		margin-top: 15rpx;
		margin-left: 35rpx;
		font-size: 35rpx;
		border-radius: 6px ;
		border-width: 3rpx;
		border-style: solid;
		border-color: #ccc;
		opacity: 0.8;
	}
	.appointment-size-unit{
		position: absolute;
		margin-left: 510rpx;
		margin-top: 20rpx;
		opacity: 0.3;
	}
	.haha{
		width: 20rpx;
		height: 20rpx;
		opacity: 0.8;
		position: absolute;
		margin-left: 365rpx;
		margin-top: 15rpx;
	}
	
	.appointment-input-box{
		margin-top: 15rpx;
		width: 390rpx;
		height:50rpx;
		margin-left: 34rpx;
		background-color: white;
		border-radius: 8rpx;
		border: 3rpx solid rgba(0,0,0,0.2);
		font-size: 35rpx;
		position: relative;
	}
	.appointment-input-text{
		box-sizing: border-box;
		padding-left: 43rpx;
		margin-top: 8rpx;
		padding-right: 72rpx;
		position: absolute;
		width: 100%;
		height: 100%;
	}
</style>
